<template>
	<view class="login-container">
		<view class="logo">
			<image src="/static/tabbar/main_icon.png" mode="aspectFit"></image>
		</view>
		<view class="form">
			<view class="input-group">
				<input type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			<view class="input-group">
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<view class="input-group captcha-group">
				<input type="text" v-model="captcha" placeholder="请输入验证码" />
				<image v-if="captchaImage" :src="captchaImage" mode="aspectFit" class="captcha-image" @tap="refreshCaptcha"></image>
			</view>
			<button class="login-btn" @click="handleLogin" :disabled="loading">{{ loading ? '登录中...' : '登录' }}</button>
			<view class="tips" v-if="errorMsg">
				<text class="error-msg">{{ errorMsg }}</text>
			</view>
			
			<!-- 注册入口 -->
			<view class="register-entry">
				<text>还没有账号？</text>
				<text class="register-link" @tap="goToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
import api from '../common/api.js';
import { getImageFromResponse } from '../../uni_modules/utils/base64Image.js';

export default {
	data() {
		return {
			username: '',
			password: '',
			captcha: '',
			captchaImage: '',
			checkKey: '1',
			loading: false,
			errorMsg: ''
		}
	},
	onLoad() {
		// 检查是否已登录
		const token = uni.getStorageSync('token');
		if (token) {
			// 验证token有效性
			this.validateToken();
		}
		// 获取验证码
		this.refreshCaptcha();
	},
	methods: {
		// 刷新验证码
		refreshCaptcha() {
			api.getCaptcha()
				.then(res => {
					console.log('验证码响应:', res.data);
					if (res.statusCode === 200 && res.data.success) {
						// 直接使用result字段的图片数据
						this.captchaImage = res.data.result;
						// 保持checkKey为固定值1
						this.checkKey = '1';
					} else {
						uni.showToast({
							title: '获取验证码失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.error('获取验证码失败:', err);
					uni.showToast({
						title: '获取验证码失败',
						icon: 'none'
					});
				});
		},
		
		// 处理登录请求
		handleLogin() {
			// 清除错误信息
			this.errorMsg = '';
			
			// 验证输入
			if (!this.username || !this.password) {
				this.errorMsg = '请输入用户名和密码';
				uni.showToast({
					title: this.errorMsg,
					icon: 'none'
				});
				return;
			}
			
			if (!this.captcha) {
				this.errorMsg = '请输入验证码';
				uni.showToast({
					title: this.errorMsg,
					icon: 'none'
				});
				return;
			}
			
			// 设置加载状态
			this.loading = true;
			
			// 打印登录参数
			const loginParams = {
				username: this.username,
				password: this.password,
				captcha: this.captcha,
				checkKey: this.checkKey
			};
			console.log('登录参数:', loginParams);
			
			// 发送登录请求
			api.login(this.username, this.password, this.captcha, this.checkKey)
				.then(res => {
					console.log('登录响应:', res);
					const dataObj = res.data.data || res.data.result;
					if (res.statusCode === 200 && res.data.success && dataObj) {
						// 登录成功
						const { token, user, access_token } = dataObj;
						
						// 存储用户信息和token
						uni.setStorageSync('token', token);
						uni.setStorageSync('user', JSON.stringify(user));
						// 打印token
						console.log('登录成功，token:', token);
						
						// 如果有access_token，也存储它
						if (access_token) {
							uni.setStorageSync('access_token', access_token);
							console.log('第三方access_token已存储');
						}
						
						// 显示成功提示
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 跳转到主页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1500);
					} else {
						// 登录失败
						console.error('登录失败响应:', res.data);
						this.errorMsg = res.data.message || '登录失败，请检查用户名和密码';
						uni.showToast({
							title: this.errorMsg,
							icon: 'none'
						});
						// 刷新验证码
						this.refreshCaptcha();
					}
				})
				.catch(err => {
					// 请求失败
					console.error('登录请求失败:', err);
					this.errorMsg = '网络错误，请检查网络连接';
					uni.showToast({
						title: this.errorMsg,
						icon: 'none'
					});
					// 刷新验证码
					this.refreshCaptcha();
				})
				.finally(() => {
					// 无论成功失败，都取消加载状态
					this.loading = false;
				});
		},
		
		// 验证token有效性
		validateToken() {
			uni.showLoading({
				title: '验证登录状态...'
			});
			
			api.validateToken()
				.then(isValid => {
					uni.hideLoading();
					if (isValid) {
						// token有效，直接跳转到主页
						uni.switchTab({
							url: '/pages/device/control'
						});
					} else {
						// token无效，需要重新登录
						uni.removeStorageSync('token');
						uni.removeStorageSync('user');
					}
				})
				.catch(() => {
					// 请求失败，需要重新登录
					uni.hideLoading();
					uni.removeStorageSync('token');
					uni.removeStorageSync('user');
				});
		},
		
		// 前往注册页面
		goToRegister() {
			uni.navigateTo({
				url: '/pages/login/register'
			});
		}
	}
}
</script>

<style lang="scss">
.login-container {
	padding: 50rpx;
	.logo {
		text-align: center;
		margin: 100rpx 0;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.form {
		.input-group {
			margin-bottom: 30rpx;
			input {
				width: 100%;
				height: 90rpx;
				padding: 0 30rpx;
				border: 1px solid #ddd;
				border-radius: 45rpx;
				font-size: 28rpx;
			}
		}
		.captcha-group {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			input {
				flex: 1;
			}
			
			.captcha-image {
				width: 200rpx;
				height: 90rpx;
				border-radius: 10rpx;
				background-color: #f5f5f5;
			}
		}
		.login-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #007AFF;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			
			&:disabled {
				background: #999;
				opacity: 0.8;
			}
		}
		.tips {
			margin-top: 20rpx;
			text-align: center;
			
			.error-msg {
				color: #ff5555;
				font-size: 26rpx;
			}
		}
		
		.register-entry {
			margin-top: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			
			.register-link {
				color: #007AFF;
				margin-left: 10rpx;
			}
		}
	}
}
</style> 